<template>
  <div class="Rank">
    <div class="list">
      <div v-for="(item, index) in data" :key="index" class="item">
        <div class="index">{{ index + 1 }}</div>
        <div class="name">
          {{ item.name }}
          <div class="id">{{ item.id }}</div>
        </div>
        <div class="change">
          <Icon
            :type="item.change > 0 ? 'arrow-up' : 'arrow-down'"
            :class="item.change > 0 ? 'arrow-up' : 'arrow-down'"
          ></Icon
          >{{ item.change > 0 ? "+" + item.change : item.change }}%
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon } from "ant-design-vue";
export default {
  name: "boardRank",
  components: { Icon },
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  mounted() { },
  data() {
    return {

    };
  },
  methods: {},
  computed: {},
};
</script>

<style scope lang="less">
.Rank {
  .arrow-up {
    color: #d81e06;
  }
  .arrow-down {
    color: #0de783;
  }
  .list {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    .item {
      display: flex;
      align-items: center;
      padding: 10px 0;
      &:nth-child(1) {
        .index {
          background-color: #F1E5A5;
          color: #D6B25D;
        }
      }
      &:nth-child(2) {
        .index {
          background-color: #E3F4FA;
          color: #87ADC4;
        }
      }
      &:nth-child(3) {
        .index {
          background-color: #F0DECE;
          color: #BC9F7E;
        }
      }
      .index {
        text-align: center;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: #e8e8e8;
        color: #2d2736;
        text-align: center;
        line-height: 25px;
        margin-right: 10px;
        flex-shrink: 0;
        font-weight: 600;
        font-size: 14px;
      }
      .name {
        width: 30%;
      }
      .id {
        width: 30%;
      }
      .change {
        text-align: right;
        flex: 1;
        font-weight: 500;
        font-size: 14px;
      }
    }
  }
  .name {
    color: #2d2736;
    font-weight: 600;
    font-size: 14px;
    .id {
      color: #999;
      font-size: 12px;
      font-weight: normal;
    }
  }
}
</style>
